import React from 'react'
import {url,playlistdetail,songdetail} from '../../../api'
import {axiosGet} from '../../../axios'
import {inject,observer} from 'mobx-react'
import formatDate from '../../../utils/timeStamp'
import {Table} from 'antd'
import {HeartOutlined} from '@ant-design/icons'

@inject('songlist')@observer
class SongListTabs extends React.Component {
    constructor(props){
        super(props)
        this.state={
            tableData:''
        }
    }
    componentDidMount(){
        this.getplaylistdetail()
    }
    //  获取歌单详情
    getplaylistdetail(){
        axiosGet(url,playlistdetail ,'id='+this.props.songlist.songlistDetail.id)
        .then(data=>{
            this.getsongdetail(data.playlist.trackIds)
        })
    }
    //  获取歌单里每首歌的详情
    getsongdetail(dataArr){
        let datas = []
        for(let i=0;i<dataArr.length;i++){
            axiosGet(url,songdetail,'ids='+dataArr[i].id)
            .then(data=>{
                datas.push(data.songs[0])
                this.setState({
                    tableData:datas
                })
            })
        }
    }
    //  处理表格所需数据
    dataDeal(){
        let newArr = []
        let datas = this.state.tableData
        for(let i=0;i<datas.length;i++){
            let obj = {}
            obj['key'] = (i+1)
            obj['id'] =  datas[i].id
            obj['name'] =  datas[i].name
            obj['singer'] =  datas[i].ar[0].name
            obj['album'] =  datas[i].al.name
            let publishTime = formatDate(datas[i].publishTime)
            obj['publishTime'] =  publishTime.slice(0,publishTime.length-8)
           newArr.push(obj)
        }
       return newArr
    }
    render(){
        let tableData =  this.dataDeal()
        const columns = [
            {
              title: ' ',
              dataIndex: 'key',
              key: 'key',
            },
            {
              title: '',
              dataIndex: 'operating',
              key: 'operating',
              render:()=>{return(<HeartOutlined />)}
            },
            {
              title: '音乐标题',
              dataIndex: 'name',
              key: 'name',

            },{
                title: '歌手',
                dataIndex: 'singer',
                key: 'singer',
              },{
                title: '专辑',
                dataIndex: 'album',
                key: 'album',
              },{
                title: '发布时间',
                dataIndex: 'publishTime',
                key: 'publishTime',
              },
          ];
        return(
            <div>
                <Table dataSource={tableData} columns={columns} />;
            </div>
        )
}}

export default SongListTabs